import React, { useContext,useState } from "react";

type ContextProps = {name:string,age:string}
// 1.全局创建
const MyContext = React.createContext<ContextProps>({name:"",age:""});

export const ContextFun: React.FC = () => {
    // 2.父组件使用
    return <MyContext.Provider value={{ name: "lkx", age: "18" }}>
        <h1>Context</h1>
        <Son1></Son1>
        <Son2></Son2>
    </MyContext.Provider>

}


export const Son1: React.FC = () => {
    const publicData = useContext(MyContext);
    return (
        <>
            <h1>Son1{JSON.stringify(publicData)}</h1>
        </>
    )
}

export const Son2: React.FC = () => {
    const publicData = useContext(MyContext);
    return (
        <>
            <h1>姓名：{publicData.name};年龄：{publicData.age}</h1>
            <LevelC></LevelC>
        </>
    )
}

export const LevelC:React.FC = ()=>{
    const publicData = useContext(MyContext);
    const [,setUpdata] =useState({});
    return(
        <div>
            <h1>孙子组件中 使用父组件的值：{publicData.name}</h1>
            <button onClick={()=>{
                setUpdata({});
                publicData.name = "lkx2";
            }}>重置</button>
        </div>
    )
}